經過幾天的實作與摸索，建立出第一個 React 運用，但是裡面還是有些東西不熟悉，這時要探討一下這些是什麼東西。

本日的範本是昨日－【D6】的 .jsx，這邊會手把手解釋，裡面的箇中奧妙。

.jsx 架構

先附上程式碼：

import { useState } from "react";

function Counter() {
  let times = 0; //計算次數
  let [times_2, setTime] = useState(0); //計算次數

  return (
    <div id="counters">
      <h1>This is a counter!</h1>
      <div>
        <button
          onClick={() => {
            console.log(`times-before: ${times} and ${times_2}`);
            times++;
            times_2++;
            console.log(`times-finished: ${times} and ${times_2}`);
            setTime(times_2);
          }}
        >
          按我
        </button>
      </div>
      <div>times: {times}</div>
      <div>times2: {times_2}</div>
    </div>
  );
}

export default Counter;

在這邊會分成幾個部分說明，由上至下分別是：模組匯入匯出、功能定義、變數設定，但是說明會根據複雜程度，從下到上說明。

變數設定

變數是指：

let times = 0; //計算次數
let [times_2, setTime] = useState(0); //計算次數

在 ES6 時新增「let」語法宣告來取代「var」。因為在 ES6 之前，JavaScript 世界沒有區塊域（block）的概念，所以使用「var」宣告變數時，可能會相互干擾，因此用「let」來代表這個區塊域，

let 是用來宣告可以改變值的變數，因此在範例中，定義了兩組可以編輯的變數，來記錄點擊次數。而之前使用的 const，是用在不會改變的變數中，像是定義數學的「pi」，為 3.14，因此可以寫成：const pi = 3.14，這樣就會固定為 3.14，不允許改變。

功能定義

function Counter() {
 return (
    <div id="counters">
     ...（省略）
     <div>
        <button
          onClick={() => {
            console.log(`times-before: ${times} and ${times_2}`);
            times++;
            times_2++;
            console.log(`times-finished: ${times} and ${times_2}`);
            setTime(times_2);
          }}
        >
          按我
        </button>
      </div>
      ...（省略）
    </div>
  );
}

跟一般的 JavaScript 相同，使用 function 關鍵字定義名為「Counter」功能，並在大括號內實作我們要做的事情。

要做的事為回傳一個物件，用 return 回傳想要的 HTML 物件。這個物件中，可以帶著一些 Javascript 語法，其中包含 React Hook 的 useState。用 useState 來改變我們的參數 times_2。

另外使用「`」符號，可以在 return 內的樣板中輸入 HTML 語法，也就是 JavaScript 語法中再夾帶一些 HTML 語法，並且可以實作它。

模組匯入匯出

最後是模組的匯入匯出。雖然是最後才寫，但是這個動作卻是最一開始和最終會做的。

• 匯入

在開頭的：

import { useState } from "react";

這是會在程式載入時，把相關模組匯入進去，在這邊是從 react 匯入 useState。其中大括號（{}），表示要實名的使用這個變數，所以可以直接使用在大括號內的變數名。

而在 index.js 也是相同的做法，匯入這份檔案的 Counter 模組：

import Counter from "./day6/Counter";

• 匯出

而匯出，則是結尾的：

export default Counter;

這邊會匯出這個 Counter模組，可以供外部使用。而外部程式使用就是用在上方介紹的 import 功能，也就是我們在 index.js中引入後，並用 render() 呈現在頁面上。

後記

稍微解析一下後，對於 React 的架構更為清楚，可以更清楚他們的連動性，也明白 React 怎麼運作，應該...未來會更流暢地做小工具吧 XDD